<script setup lang="ts">
import Echarts from "@/components/echartsTemplate/index.vue";
import { onMounted, reactive } from "vue";
import { fetchGetActivityByMonth } from '@/api/screen/activity'

onMounted(() => {
  getActivityByMonth()
})

const getActivityByMonth = async () => {
  const res = await fetchGetActivityByMonth()
  console.log(res.data)
}


const option = reactive({
  legend: { //图例
    x: "center",  //居中
    itemGap: 30, //图例之间距离
    itemWidth: 20, //图例大小
    itemHeight: 20,
    textStyle: {  //图例字体样式
      fontSize: 20,
      color: "#ffffff",
    },
    data: ['社团活动', '院级活动', "校级活动"],
  },
  grid: {  //图表距离
    top: "15%",
    left: "8%",
    right: "5%",
    bottom: "10%",
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: "category",
    data: ["第一个月", "第二个月", "第三个月", "第四个月", "第五个月"],
    splitLine: {
      show: false,
    },
    axisLabel: {
      color: "#ffffff",
      fontSize: 16,
      interval: "auto", // x轴间距
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: "rgba(152, 212, 255, .1)",
      },
    },
  },
  yAxis: [{
    type: "value",
    name: "个",
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: true,
      fontSize: 16,
      color: "#ffffff",
    },
    axisLine: {
      show: false,
    },
    splitLine: {
      lineStyle: {
        color: "rgba(152, 212, 255, .1)",
      },
    },
  }
  ],
  series: [{
    type: "bar",
    name: "社团活动",
    barWidth: 15,
    label: {
      show: true,
      position: 'top',
      textStyle: {
        fontSize: 10,
        color: '#fff'
      }
    },
    itemStyle: {
      color: {
        type: "linear",
        x: 0, // 右
        y: 1, // 下
        x2: 0, // 左
        y2: 0, // 上
        colorStops: [
          {
            offset: 0,
            color: "#082350",// 0% 处的颜色
          },
          {
            offset: 1,
            color: "#27E6AB", // 90% 处的颜色
          },
        ],
      },
    },
    data: [20, 12, 15, 16, 12],
  },
  {
    type: "bar",
    name: "院级活动",
    barWidth: 15,
    label: {
      show: true,
      position: 'top',
      textStyle: {
        fontSize: 10,
        color: '#fff'
      }
    },
    itemStyle: {
      color: {
        type: "linear",
        x: 0, // 右
        y: 1, // 下
        x2: 0, // 左
        y2: 0, // 上
        colorStops: [
          {
            offset: 0,
            color: "#082350", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "#09CDFF", // 90% 处的颜色
          },
        ],
      },
    },
    data: [11, 18, 20, 13, 16],
  }, {
    type: "bar",
    name: "校级活动",
    barWidth: 15,
    label: {
      show: true,
      position: 'top',
      textStyle: {
        fontSize: 10,
        color: '#fff'
      }
    },
    color: {
      type: "linear",
      x: 0, // 右
      y: 1, // 下
      x2: 0, // 左
      y2: 0, // 上
      colorStops: [
        {
          offset: 0,
          color: "#082451", // 0% 处的颜色
        },
        {
          offset: 1,
          color: "#F6B230", // 90% 处的颜色
        },
      ],
    },
    data: [20, 12, 15, 30, 26],
  }],
})

</script>

<template>
  <div class="ringDiagram">
    <Echarts :option="option"></Echarts>
  </div>
</template>

<style scoped lang="scss">
.ringDiagram {
  height: 100%;
}
</style>
